﻿
@{
    /**/

    ViewBag.Title = "一元云购商品添加修改";
    Layout = null;
    Yyyg.Models.Pair<string, string>[][] types = ViewBag.Types;

    IEnumerable<SelectListItem> firstClass = types[0].Select(s => new SelectListItem()
    {
        Text = s.Value1,
        Value = s.Value2,
        Disabled = false,
        Selected = false
    }).ToList();

    IEnumerable<SelectListItem> secondClass = types[1].Select(s => new SelectListItem()
    {
        Text = s.Value1,
        Value = s.Value2,
        Disabled = false,
        Selected = false
    }).ToList();
}
@model Yyyg.WebUI.Models.GoodVM

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="~/Content/pub.css" rel="stylesheet" />
    <link href="~/Content/reset.css" rel="stylesheet" />
    <style>
        * {
            box-sizing: border-box;
            outline: none;
        }

        html {
            width: 100%;
            height: 100%;
            background-color: transparent;
        }

        body {
            width: 100%;
            height: 100%;
            background-color: transparent;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        form {
            width: 100%;
            height: 100%;
            padding: 30px;
            box-sizing: border-box;
            color: #555;
        }

            form > div:last-child {
                text-align: center;
            }

        input[type="text"], input[type="number"], textarea {
            width: 100%;
            border-radius: 5px;
            border: 1px solid #ccc;
            padding: 10px;
            color: #444;
            outline: none;
            box-sizing: border-box;
        }

        .uploader-box {
            border: 1px solid #ccc;
            border-radius: 15px;
            position: relative;
            width: 80px;
            height: 80px;
            cursor: pointer;
            overflow: hidden;
            display: inline-flex;
            margin-right: 5px;
        }

            .uploader-box:before {
                content: "+";
                font-size: 1.5rem;
                color: #ccc;
            }

            .uploader-box:hover {
                border-color: deepskyblue;
            }

                .uploader-box:hover::before {
                    color: deepskyblue;
                }

            .uploader-box img {
                /*display: block;*/
                position: absolute;
                left: 0;
                right: 0;
                width: 100%;
                height: 100%;
                display: none;
                background-color: white;
            }

            .uploader-box input[type="file"] {
                display: none;
            }

        .selectOver img, .selectOver .close-btn {
            display: block;
        }

        .close-btn {
            position: absolute;
            right: 5px;
            top: -5px;
            color: red;
            cursor: pointer;
            font-size: 1.4rem;
            display: none;
        }

            .close-btn:hover {
                color: rgb(249, 127, 127);
            }

        #submit {
            width: 200px;
            height: 40px;
            font-size: 1.2rem;
        }

        .sbbox {
            height: 80px;
        }
    </style>
</head>
<body class="flex-center">
    @using (Html.BeginForm(Model.SetDefaule?"SetGood":"AddNewGood", "BackStage", FormMethod.Post, new { id = "gform", enctype = "multipart/form-data" }))
    {
        <input id="guid" style="display:none" type="text" value="@Model.Guid" name="Guid" />
        <span id="fmodel" style="display:none">@(Model.SetDefaule?"Change":"Added")</span>
        //商品信息添加表单
        <div class="g-title">
            <p>@Html.DisplayNameFor(m => m.Title):</p>
            <p>@Html.EditorFor(m => m.Title, new { value = Model.Title, placeholder = "商品标题" })</p>
            <p>@Html.ValidationMessageFor(m => m.Title)</p>
        </div>
        <div class="g-price">
            <p>@Html.DisplayNameFor(m => m.Price):</p>
            <p><input type="number" id="gd-price" name="Price" value="@Model.Price" placeholder="商品价值" min=0 /></p>
            <p>@Html.ValidationMessageFor(m => m.Price)</p>
        </div>
        <div class="g-needamo">
            <p>@Html.DisplayNameFor(m => m.NeedAmount)</p> 
            <p><input type="number" id="gd-price" name="NeedAmount" value="@Model.NeedAmount" placeholder="所需夺宝人次" min=0 /></p>
            <p>@Html.ValidationMessageFor(m => m.NeedAmount)</p>
        </div>
        <div class="g-typeid">
            <p>分类信息:</p>
            <p>
                父级分类: @Html.DropDownList("pt", firstClass, "请选择父级分类", new { id = "p_select" })
                子级分类: @Html.DropDownList("st", secondClass, "请选择子级分类", new { id = "s_select" })
            </p>
            <p>@Html.ValidationMessageFor(m => m.Typeid)</p>
        </div>
        <div class="g-stock">
            <p>@Html.DisplayNameFor(m => m.Stock):</p>
            <p><input type="number" id="gd-stock" name="Stock" value="@Model.Stock" placeholder="商品库存" min=0 /></p>
            <p>@Html.ValidationMessageFor(m => m.Stock)</p>
        </div>
        <div class="g-brin">
            <p>@Html.DisplayNameFor(m => m.Brin):</p>
            <p>@Html.TextAreaFor(m => m.Brin, new { value = Model.Brin, placeholder = "输入商品简介" })</p>
            <p>@Html.ValidationMessageFor(m => m.Brin)</p>
        </div>
        //展示图片选择
        <div class="g-mainimg">
            <p>@Html.DisplayNameFor(m => m.Mainimg):</p>
            <label id="mimg-box" class="flex-center uploader-box first" for="mainimg-uploader">
                <img src="#" id="main-img" alt="商品展示图片" />
                <input accept=".jpeg,.jpg,.png" type="file" name="Mainimg" id="mainimg-uploader" class="single-uploader uploader" />
                <i class="close-btn" title="移除">x</i>
            </label>
        </div>
        //附属图片选择
        <div class="g-subimgs">
            <p>@Html.DisplayNameFor(m => m.Subimgs):</p>
            <label class="flex-center uploader-box first" for="sub-uploader-0">
                <img src="#" alt="商品展示图片" />
                <input accept=".jpeg,.jpg,.png" type="file" id="sub-uploader-0" class="many-uploader sub-uploader uploader" />
                <i class="close-btn" title="移除">x</i>
            </label>
        </div>
        //详情图片选择
        <div class="g-detimgs">
            <p>@Html.DisplayNameFor(m => m.Detimgs):</p>
            <label class="flex-center uploader-box first" for="det-uploader-0">
                <img src="#" alt="商品展示图片" />
                <input accept=".jpeg,.jpg,.png" type="file" id="det-uploader-0" class="many-uploader det-uploader uploader" />
                <i class="close-btn" title="移除">x</i>
            </label>
        </div>
        //上架状态
        <div class="g-enable">
            <p>@Html.DisplayNameFor(m => m.Enable):</p>
            <p>
                <input checked="checked" type="checkbox" id="good-enable" class="slider-input" />
                <label for="good-enable" class="slider-label"></label>
            </p>
        </div>

        <div class="sbbox flex-center">
            <input type="submit" id="submit" class="btn" value="提交" />
        </div>
    }

    <script src="~/Scripts/jquery-3.6.0.js"></script>
    <script src="~/Scripts/backstage/gadd.js"></script>
    <script type="text/javascript">
        $("#s_select option:gt(0)").hide();
        @if (Model.SetDefaule)
        {
            string mainimg = Model.Mainimg_URL;
            string[] subs = Model.SubImgs_URL;
            string[] dets = Model.DetImgs_URL;
           <text>
           var mainurl="@Html.Raw(mainimg)";
           var subs =@Html.Raw(Json.Encode(subs));
           var dets =@Html.Raw(Json.Encode(dets));
           setMainUpLoader(mainurl);
           setManyloader(subs, true);
           setManyloader(dets, false);
           @if (!Model.Enable) { <text>$("#good-enable").removeAttr("checked"); </text> }
           setSubTypeid(@Model.Typeid);
           $("#fmodel").text("Change");
           </text>
        }
    </script>
</body>
</html>
